<header class='py-4 sm:px-0 bg-white dark:bg-neutral-600 sticky top-0 z-50 '>
	<nav class='wrap mx-auto px-8 flex justify-between'>
		<div class="flex items-center gap-2">

			<a href="/" title="Return to the homepage">
				{% include 'logo.njk' %}
			</a>
			<a href="{{github.release.url}}" class="rounded-full border-2 border-neutral-200 hover:border-main-400 dark:hover:border-main-300 text-xs text-neutral-500 dark:text-neutral-200 mt-2 py-1 px-2">{{github.release.name}}</a>
		</div>
		<ul class='flex gap-4 items-center text-black dark:text-neutral-100'>
			<li class="hidden sm:block">
				<a class="hover:text-main dark:hover:text-main-300" href="{{meta.sourcePath}}" class="">
					{% include 'icon-github.njk' %}
				</a>
			</li>
			<li class="">
				<button class="hover:text-main dark:hover:text-main-300" id="dark-light-toggle">
					{% include 'icon-sun.njk' %}
					{% include 'icon-moon.njk' %}
				</button>
			</li>
			<li class="hidden sm:block">
				<a href="/quickstart" class="btn-fancy dark:btn-fancy-dark dark:text-neutral-100 text-black block">
          Get Started
				</a>
			</li>
			<li class="flex sm:hidden">
				<button class="hover:text-main dark:hover:text-main-300m" id="toggle-nav">{% include 'icon-menu.njk' %}</button>
			</li>
		</ul>
	</nav>
</header>